﻿var xhr;
var img;
/*****************************************************************************/
function getProduct(image) {

    /* create xhr */
    if (window.ActiveXObject) {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest;
    }
    /* build query string */
    var strURL = "ProductsServlet?prod_id=" + escape(image.id)
    
    /* remembers the location */
    img = image;

    /* grays out other images */
    var tbl = document.getElementById("tblProductsGrid");
    var images = tbl.getElementsByTagName("img");
    for (var i = 0; i < images.length; i++) {
        if (images[i].getAttribute("id") != image.getAttribute("id")) {
            images[i].setAttribute("style", "opacity:0.8;");
            images[i].style.filter = "alpha(opacity=80)";   
        }
    }
    img.setAttribute("style", "opacity:1;"); // fix for IE first cos
    img.style.filter = "none";               // IE will overwrite FF
    
    /* setup xhr */
    xhr.open("GET", strURL, true);
    xhr.onreadystatechange = handleGetProduct;
    //xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    xhr.send(null);
}
/*****************************************************************************/
function handleGetProduct() {

    if (xhr.readyState != 4) return;
    if (xhr.status != 200) return;
    
    var xhresponse = xhr.responseXML;

    if (xhresponse.length == 0) {
        hideTooltip();
        return;
    }
    /* read product attributes */
    var strProductID = xhresponse.getElementsByTagName("ProductID")[0].firstChild.nodeValue;
    var strProductName = xhresponse.getElementsByTagName("ProductName")[0].firstChild.nodeValue;
    var strDescription = xhresponse.getElementsByTagName("Description")[0].firstChild.nodeValue;
    var strPrice = xhresponse.getElementsByTagName("Price")[0].firstChild.nodeValue;
    var strUnits = parseInt(xhresponse.getElementsByTagName("Units")[0].firstChild.nodeValue)

    /* put data to respective cells */
    putData(document.getElementById("tdProductName"), strProductName);
    putData(document.getElementById("tdDescription"), strDescription);
    putData(document.getElementById("tdProductID"), strProductID);
    putData(document.getElementById("tdPrice"), strPrice);
    putData(document.getElementById("tdUnits"), strUnits);

    showTooltip();   
}
/*****************************************************************************/
/* put data to the cell */
function putData(cell, data) {
    removeChildren(cell);
    cell.appendChild(document.createTextNode(data));
}
/*****************************************************************************/
/* removes all data in cells*/
function hideTooltip(image) {
    
    /* hide the tooltip */
    document.getElementById("divTooltip").style.display = "none";
    
    /* erase the data */
    removeChildren(document.getElementById("tdProductName"));
    removeChildren(document.getElementById("tdDescription"));
    removeChildren(document.getElementById("tdProductID"));
    removeChildren(document.getElementById("tdPrice"));
    removeChildren(document.getElementById("tdUnits"));

    img.setAttribute("style", "opacity:0.8;");  // fix for IE first cos
    img.style.filter = "alpha(opacity=80)";     // IE will overwrite FF
    
    /* recover opacity for all images*/
    //var tbl = document.getElementById("tblProductsGrid");
    //var images = tbl.getElementsByTagName("img");
    //for (var i = 0; i < images.length; i++) {
    //    images[i].style.filter = "none";
    //    images[i].setAttribute("style", "opacity:1;");
    //}  
}
/*****************************************************************************/
function showTooltip() {
    
    /* find where to display the tooltip */
    var x = getPosition(img, "offsetLeft") - 250;
    var y = getPosition(img, "offsetTop");
  
    /* display the tooltip */
    var divTooltip = document.getElementById("divTooltip");

    divTooltip.style.left = x + 'px';
    divTooltip.style.top = y + 'px';
    
    divTooltip.style.display = "block";
}
/*****************************************************************************/
